<template>
  <el-container>
    <el-header>
      <scFilterBar
        filterName="filterName"
        :key="filterKey"
        :options="filterOptions"
        @filterChange="filterChange"
      >
        <template #default="{ filterLength, openFilter }">
          <el-badge
            :value="filterLength"
            type="danger"
            style="margin-right: 50px"
            :hidden="filterLength <= 0"
          >
            <el-button icon="el-icon-filter" @click="openFilter"
              >筛选</el-button
            >
          </el-badge>
          <el-button
            v-if="auth.add"
            type="primary"
            icon="el-icon-plus"
            @click="add"
            >新增</el-button
          >
          <el-button
            v-if="auth.delete"
            type="danger"
            plain
            icon="el-icon-delete"
            :disabled="selection.length == 0"
            @click="batch_del"
            >删除</el-button
          >
          <el-button
            type="success"
            plain
            icon="el-icon-refresh"
            @click="$refs.table.reload(searchData, 1)"
            >刷新</el-button
          >
        </template>
      </scFilterBar>
    </el-header>
    <el-main class="nopadding">
      <scTable
        ref="table"
        :apiObj="apiObj"
        :params="searchData"
        :pageSize="10"
        row-key="uid"
        stripe
        @selection-change="selectionChange"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="用户id" prop="uid" width="80"></el-table-column>
        <el-table-column
          label="用户名"
          prop="user_name"
          width="150"
        ></el-table-column>
        <el-table-column label="所在部门" prop="depart_id" width="150">
          <template #default="scope">
            {{ convertName(initConfig.departs.source, scope.row.depart_id) }}
          </template>
        </el-table-column>
        <el-table-column label="角色" prop="role_id">
          <template #default="scope">
            {{ convertName(initConfig.roles.source, scope.row.role_id) }}
          </template>
        </el-table-column>

        <el-table-column label="真实姓名" prop="real_name"></el-table-column>
        <el-table-column label="手机号" prop="mobile"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column
          label="最后登录时间"
          prop="last_login_time"
        ></el-table-column>
        <el-table-column label="状态" prop="state">
          <template #default="scope">
            <el-switch
              v-model="scope.row.state"
              :active-value="1"
              :inactive-value="-1"
              disabled
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="350">
          <template #default="scope">
            <el-button
              type="info"
              size="small"
              @click="table_show(scope.row, scope.$index)"
              icon="el-icon-view"
              >查看</el-button
            >
            <el-button
              v-if="auth.edit"
              type="primary"
              size="small"
              @click="table_edit(scope.row, scope.$index)"
              icon="el-icon-edit"
              >编辑</el-button
            >
            <el-button
              v-if="auth.reset"
              type="warning"
              size="small"
              @click="resetPwd(scope.row, scope.$index)"
              icon="el-icon-edit"
              >重置密码</el-button
            >
            <el-popconfirm
              v-if="auth.delete"
              title="确定删除吗？"
              @confirm="table_del(scope.row, scope.$index)"
            >
              <template #reference>
                <el-button type="danger" size="small" icon="el-icon-delete"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>

  <save-dialog
    v-if="dialog.save"
    ref="saveDialog"
    @success="handleSaveSuccess"
    @closed="dialog.save = false"
  ></save-dialog>

  <password-dialog
    v-if="dialog.reset"
    ref="passwordDialog"
    @success="handleSaveSuccess"
    @closed="dialog.reset = false"
  ></password-dialog>
</template>

<script>
import saveDialog from "./save";
import passwordDialog from "./password";

export default {
  name: "member",
  components: {
    saveDialog,
    passwordDialog,
  },
  data() {
    return {
      //按钮权限
      auth: {
        add: this.$AUTH("member.add"),
        reset: this.$AUTH("member.reset"),
        edit: this.$AUTH("member.edit"),
        delete: this.$AUTH("member.delete"),
      },
      apiObj: this.$API.user.member.list,
      initConfig: {
        roles: {
          source: [],
          treeNode: [],
        },
        departs: {
          source: [],
          treeNode: [],
        },
      },
      searchData: {
        search: null,
      },
      filterKey: 1,
      filterOptions: [],
      dialog: {
        save: false,
        reset: false,
      },
      selection: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    //初始化，获取部门和角色配置
    async init() {
      const roles = await this.$API.system.role.init.get();
      const departs = await this.$API.system.depart.init.get();

      if (roles.code != 200) {
        this.$message.warning(roles.message);
        return;
      }
      if (departs.code != 200) {
        this.$message.warning(departs.message);
        return;
      }

      this.initConfig.roles = roles.data;
      this.initConfig.departs = departs.data;

      //console.log(this.initConfig.roles)
      await this.setFilterOptions();
    },
    //转化名字
    convertName(obj, value) {
      const ObjectS = obj[value];
      if (ObjectS == undefined) {
        return "未知";
      }
      return ObjectS.label;
    },
    //筛选配置
    async setFilterOptions() {
      this.filterOptions = [
        {
          label: "姓名",
          value: "user_name",
          type: "text",
        },
        {
          label: "手机号",
          value: "mobile",
          type: "text",
        },
        {
          label: "部门",
          value: "depart_id",
          type: "treeSelect",
          extend: {
            data: this.initConfig.departs.treeNode,
          },
        },
        {
          label: "角色",
          value: "role_id",
          type: "treeSelect",
          extend: {
            data: this.initConfig.roles.treeNode,
            groupsProps: {},
          },
        },
      ];
      this.filterKey = 2;
    },
    //添加
    add() {
      this.dialog.save = true;
      this.$nextTick(() => {
        console.log(this.$refs.saveDialog);
        this.$refs.saveDialog.open();
      });
    },
    //重置密码
    resetPwd(row) {
      this.dialog.reset = true;
      this.$nextTick(() => {
        this.$refs.passwordDialog.open("reset").setData(row);
      });
    },
    //编辑
    table_edit(row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("edit").setData(row);
      });
    },
    //查看
    table_show(row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("show").setData(row);
      });
    },
    //删除
    async table_del(row) {
      this.delIds = [row.uid];
      await this.del();
    },
    //批量删除
    async batch_del() {
      this.$confirm(
        `确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`,
        "提示",
        {
          type: "warning",
        }
      )
        .then(() => {
          this.delIds = [];
          this.selection.forEach((item) => {
            this.delIds.push(item.uid);
          });

          this.del();
        })
        .catch(() => {});
    },
    async del() {
      const loading = this.$loading();
      var res = await this.$API.user.member.del.post({ ids: this.delIds });
      loading.close();
      this.delIds = [];
      if (res.code == 200) {
        this.$refs.table.refresh();
        this.$message.success("删除成功");
      } else {
        this.$alert(res.message, "提示", { type: "error" });
      }
    },
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },
    //筛选变更
    filterChange(data) {
      console.log(data);
      this.searchData.search = data;
      this.$refs.table.reload(this.searchData, 1);
    },
  },
};
</script>

<style></style>
